var left=document.getElementById("left11");
var mirror=document.getElementById("mirror");
var right=document.getElementById("right11");
var leftimg=document.getElementById("leftimg");
var rightimg=document.getElementById("rightimg");
var oSmall=document.getElementById("smallImg");
var oLi=oSmall.getElementsByTagName("li");
var oCoupon1=document.getElementById("coupon1");
var oCoupon2=document.getElementById("coupon2");
var oChangeP=document.getElementById("changePrice");
var oDiscount=document.getElementById("discount");
var oTaste=document.getElementById("taste");
var aLi=oTaste.getElementsByTagName("li");
var oPack=document.getElementById("pack");
var bLi=oPack.getElementsByTagName("li");
var oBtnL=document.getElementById("reduce");
var oText=document.getElementById("text");
var oBtnR=document.getElementById("increase");
var oRight1=document.getElementById("right1");
var oRight2=document.getElementById("right2");
var oRight3=document.getElementById("right3");
var oContent1=document.getElementById("details-content1");
var oContent2=document.getElementById("details-content2");
var oContent3=document.getElementById("details-content3");
var arr1=["img/index-shop/bigImg1.png","img/index-shop/bigImg2.png","img/index-shop/bigImg3.png"];

left.onmouseover=function(ev){

    mirror.style.display="block";
    right.style.display="block";
    document.onmousemove=function(ev){
        var ev = ev || event;
        movX=ev.clientX-left.offsetLeft-mirror.offsetWidth/2;
        movY=ev.clientY-left.offsetTop-mirror.offsetHeight/2;
        maxX=left.clientWidth-mirror.offsetWidth;
        maxY=left.clientHeight-mirror.offsetHeight;
        if(movX<0){
            movX=0;
        }
        if(movY<0){
            movY=0;
        }
        if(movX>=maxX){
            movX=maxX;
        }
        if(movY>=maxY){
            movY=maxY;
        }
        mirror.style.left=movX+"px";
        mirror.style.top=movY+"px";
        var numX=rightimg.offsetWidth/leftimg.offsetWidth;
        var numY=rightimg.offsetHeight/leftimg.offsetHeight;
        right.scrollLeft=movX*numX;
        right.scrollTop=movY*numY;
    }
}
left.onmouseout=function(){
    document.onmousemove=null;
    mirror.style.display="none";
    right.style.display="none";
}


leftimg.src=arr1[0];
oLi[0].className="active";
for(var i=0;i<oLi.length;i++){
    oLi[i].index=i;
    oLi[i].onclick=function(){
        leftimg.src=arr1[this.index];
        for(var j=0;j<oLi.length;j++){
            oLi[j].className="";
            rightimg.src=arr1[this.index];
        }
        this.className="active";
    }
}
oCoupon1.onclick=function(){
    oCoupon1.style.display="none";
    oCoupon2.style.display="block";
    oChangeP.style.display="block";
    oDiscount.style.display="none";
}
oCoupon2.onclick=function(){
    oCoupon1.style.display="block";
    oCoupon2.style.display="none";
    oChangeP.style.display="none";
    oDiscount.style.display="block";
}
for(var i=1;i<aLi.length;i++){
    aLi[i].index=i;
    aLi[i].onclick=function(){
        for(var j=1;j<aLi.length;j++){
            aLi[j].className="";
        }
        this.className="active";
    }
}
for(var i=1;i<bLi.length;i++){
    bLi[i].index=i;
    bLi[i].onclick=function(){
        for(var j=1;j<bLi.length;j++){
            bLi[j].className="";
        }
        this.className="active";
    }
}
oBtnL.onclick=function(){
    oText.value--;
    if(oText.value<0){
        oText.value=0;
    }
}
oBtnR.onclick=function(){
    oText.value++;
    if(oText.value>1000){
        oText.value=1000;
    }
}
oRight1.onclick=function(){
    oRight1.className="active";
    oRight2.className="";
    oRight3.className="";
    oContent1.style.display="block";
    oContent2.style.display="none";
    oContent3.style.display="none";
}
oRight2.onclick=function(){
    oRight1.className="";
    oRight2.className="active";
    oRight3.className="";
    oContent1.style.display="none";
    oContent2.style.display="block";
    oContent3.style.display="none";
}
oRight3.onclick=function(){
    oRight1.className="";
    oRight2.className="";
    oRight3.className="active";
    oContent1.style.display="none";
    oContent2.style.display="none";
    oContent3.style.display="block";
}